<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" fixed />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image
          round class="avatar"
          :src="userProfile.photo"
          @click="handleOpen"
          />
          <!-- 准备一个隐藏的文件域，本质需要通过这个标签选择图片 -->
          <input type="file"
          accept="image/png,image/jpeg,image/webp"
          ref="photo"
          style="display:none"
          @change="handleUpload"
          >
        </template>
      </van-cell>
      <van-cell title="名称" is-link :value="userProfile.name" @click="isShow1 = true" />
      <!-- 修改名称的模态框 -->
      <van-dialog
      v-model="isShow1"
      title="修改名称"
      @closed="userObj.name = userProfile.name"
      :before-close="handleBeforeClose"
      show-cancel-button
      >
        <van-field placeholder="请输入昵称" v-model="userObj.name" v-focus />
      </van-dialog>
      <van-cell title="性别" is-link :value="userProfile.gender === 0 ? '男' : '女' " />
      <van-cell title="生日" is-link :value="userProfile.birthday" @click="isShow2 = true" />
      <van-popup v-model="isShow2" position="bottom" style="height: 50%" round>
        <!-- 日期选择器 -->
        <van-datetime-picker
        v-model="currentDate"
        :min-date="minDate"
        :max-date="maxDate"
        type="date"
        title="选择出生日期"
        @cancel="handleCancel"
        @confirm="handleConfirm"
        />
      </van-popup>
    </van-cell-group>
  </div>
</template>

<script>
import { getUserProfileAPI, getPhotoAPI, updateUserNameAPI } from '@/api/user'
import dayjs from 'dayjs'
export default {
  name: 'UserEdit',

  data () {
    return {
      userProfile: {},
      // 控制修改名称模态框的显示
      isShow1: false,
      // 控制修改生日弹出层的显示
      isShow2: false,
      userObj: {
        name: '',
        birthday: ''
      },
      currentDate: new Date(),
      minDate: new Date(1970, 0, 1),
      maxDate: new Date()
    }
  },
  created () {
    this.getUserProfile()
  },

  methods: {
    // 获取用户基本资料
    async getUserProfile () {
      // 调接口发请求
      const resp = await getUserProfileAPI()
      this.userProfile = resp.data

      // 在 userObj 中也存一份
      this.userObj.name = resp.data.name
      this.userObj.birthday = resp.data.birthday
      // 把响应数据中的 birthday 变成一个日期对象赋值给 currentDate
      this.currentDate = new Date(resp.data.birthday)
    },

    // 模态框关闭前的回调
    async handleBeforeClose (action, done) {
      if (action === 'cancel') return done()
      // 1.校验
      const regexp = /^[a-z\d\u4e00-\u9fa5]{1,7}$/i
      if (!regexp.test(this.userObj.name)) {
        this.$toast.fail('名称需由1-7位中英文及数字组成')
        return done(false)
      }
      // 2.调接口发请求
      await updateUserNameAPI(this.userObj)
      done()
      // 3.关闭弹框
      this.isShow1 = false
      // 4.显示修改后的昵称
      // 方式一：再次调用获取用户资料的函数
      // this.getUserProfile()
      // 方式二：不调用函数，直接对userProfile.name赋值
      this.userProfile.name = this.userObj.name
    },

    // 打开文件选择器
    handleOpen () {
      // 获取文件域调用click()方法
      this.$refs.photo.click()
    },

    // 图片上传
    async handleUpload (e) {
      // 1.获取选择的文件
      const file = e.target.files[0]
      // 2.非空校验
      if (!file) return
      // 3.创建formData对象并添加字段
      const formData = new FormData()
      // 添加后台需要的键值对
      // photo：后台接口文档需要的参数名
      // file：文件对象
      formData.append('photo', file)
      // 调接口发请求
      const resp = await getPhotoAPI(formData)
      // 接收结果，给 userProfile 的 photo 属性赋值
      this.userProfile.photo = resp.data.photo
    },

    // 点击取消van-datetime-picker
    handleCancel () {
      // 关闭弹框
      this.isShow2 = false
      // 重置 currentDate
      this.currentDate = new Date(this.userObj.birthday)
    },

    // 点击确定键
    async handleConfirm () {
      // 调接口发请求
      await getUserProfileAPI({
        ...this.userObj,
        // 通过 dayjs 格式化Picker选择的日期对象，得到符合后台格式的日期字符串
        birthday: dayjs(this.currentDate).format('YYYY-MM-DD')
      })
      // 请求成功后要关闭弹出层
      this.isShow2 = false
      // 显示修改后的生日
      this.userProfile.birthday = dayjs(this.currentDate).format('YYYY-MM-DD')
    }
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
